<script setup>


import {Refresh, Search} from "@element-plus/icons-vue";
import {ElLoading, ElMessageBox, ElTable, ElMessage} from "element-plus";
import {onMounted, ref} from "vue";

let tableData = ref([])
import axios from "axios";

const fromLabelWidth = '140px';
let deleteSelectList = ref([]);
let form = ref({
  discussionId: '',
  replyContent: '',
  memberId: '',
  questionId: '',
  replyTime: '',
})
// 用于存储选中行的数组
const multipleSelection = ref([]);

//   显示全部
const testGet = () => {
  axios.get("/coursediscussion")
      .then(resp => {
        tableData.value = resp.data.data;
        multipleSelection.value = []; // 刷新数据时清空选中行
      })
      .catch((err) => {
        console.log(err);
      })
}

///添加
const FormVisible = ref(false);

const testPost = () => {
  axios.post("/coursediscussion", form.value)
      .then(resp => {
        console.log(resp.data);
        testGet();
      })
      .catch((err) => {
        console.log(err);
      })
  FormVisible.value = false;
}


//刷新
const shuaxin = () => {
  testGet();
}

//重置按钮
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
  }, 500)
  shuaxin();
}

//搜索
let shoucangbianhao = ref();
const search = () => {
  axios.get("/coursediscussion/id",
      {
        params: {
          discussionId: shoucangbianhao.value,
        },
        header: {'Content-Type': 'multipart/form-data'}
      })
      .then(resp => {
        console.log(resp.data);
        tableData.value = [];
        tableData.value.push(resp.data.data);
      })
      .catch((err) => {
        console.log(err);
      })
}

//删除
const testDelete = (row) => {
  console.log("Delete.....")
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete("/coursediscussion", {
      params: {discussionId: row.discussionId}
    })
        .then(resp => {
          console.log(resp);
          testGet();
        })
        .catch(err => {
          console.log(err);
        })
  }).catch(() => {
    console.log('取消删除');
  })
}
//批量删除数据数组
let str3 = ref("")
const dialogFormVisibleselecedel = () => {
  console.log("批量删除")
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(resp => {
        showArr();
      })
}

//批量删除数据方法
function showArr() {
  if (deleteSelectList.value.length > 0) {
    let arrList = [];
    deleteSelectList.value.forEach(item => {
      arrList.push(item.discussionId);
    })
    console.log('###########', arrList)
    axios.delete("/coursediscussion/deleteselect", {data: arrList}
    )
        .then(resp => {
          console.log('~~~~~~~``')
          ElMessage.success('删除成功')
          testGet();
        })
  } else {
    console.log('**********')
    return ElMessage.error('请选择要批量删除的数据')
  }
}

function selectChange(e) {
  deleteSelectList.value = e;
}

//修改
const dialogFormVisible = ref(false);
const xiugaitanchukuang = (row) => {
  form.value = {...row}; // 将行数据复制到表单中
  dialogFormVisible.value = true; // 显示对话框
};

const testPut = () => {
  console.log("Put.....")
  axios.put("/coursediscussion", {
    discussionId: form.value.discussionId,
    replyContent: form.value.replyContent,
    memberId: form.value.memberId,
    replyTime: null,
    questionId: form.value.questionId,

  }, {
    headers: {"Content-Type": "multipart/form-data"}
  })
      .then(resp => {
        console.log(resp);
        testGet();
        console.log("-------------------");
      })
      .catch(err => {
        console.log(err);
      })
  dialogFormVisible.value = false
}


onMounted(testGet);
</script>

<template>
  <div class="top">
    <div>
      <div class="title-name">课程收藏</div>
      <div class="title-search">
        回复编号
        <el-input v-model="shoucangbianhao" style="width: 240px" placeholder="请输入回复编号"/>
        <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>
        <el-button type="warning" style="margin-left: 20px" @click="shuaxin" :icon="Refresh">重置</el-button>
        <el-button type="primary" @click="FormVisible = true">添加收藏</el-button>
        <el-button class="shuaxin" type="primary" @click="openFullScreen2">点击刷新</el-button>
        <el-button type="danger" @click="dialogFormVisibleselecedel">批量删除</el-button>
      </div>
    </div>
    <!--  显示全部数据-->
    <div>
      <el-table :data="tableData" style="width: 100%" @select="selectChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column property="discussionId" label="交流编号" width="180"/>
        <el-table-column property="replyContent" label="回复内容" width="180"/>
        <el-table-column property="memberId" label="会员编号" width="180"/>
        <el-table-column property="replyTime" label="回复时间" width="260"/>
        <el-table-column property="questionId" label="问题编号" width="180"/>
        <el-table-column prop="scope" label="操作" width="150">
          <!--          插槽:修改和删除按钮-->
          <template #default="scope">
            <el-button type="primary" size="small" @click="xiugaitanchukuang(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="testDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
  <!--  修改全部字段-->
  <el-dialog v-model="dialogFormVisible" title="修改回复" width="500">
    <el-form :model="form">
      <el-form-item label="交流编号" :label-width="fromLabelWidth">
        <el-input v-model="form.discussionId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="回复内容" :label-width="fromLabelWidth">
        <el-input v-model="form.replyContent" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="会员编号" :label-width="fromLabelWidth">
        <el-input v-model="form.memberId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="回复时间" :label-width="fromLabelWidth">
        <el-input v-model="form.replyTime" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="问题编号" :label-width="fromLabelWidth">
        <el-input v-model="form.questionId" autocomplete="off"/>
      </el-form-item>
      <!--  确认对话框-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPut">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  添加回复弹框-->
  <el-dialog v-model="FormVisible" title="添加回复" width="400">
    <el-form :model="form">
      <el-form-item label=" 交流编号" :label-width="fromLabelWidth">
        <el-input autocomplete="off" placeholder="id自动生成"/>
      </el-form-item>
      <el-form-item label=" 回复内容" :label-width="fromLabelWidth">
        <el-input v-model="form.replyContent" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="会员编号 " :label-width="fromLabelWidth">
        <el-input v-model="form.memberId" autocomplete="off"/>
      </el-form-item>
      <!--      <el-form-item label="收藏时间" :label-width="fromLabelWidth">-->
      <!--        <el-input v-model="form.value.favoriteTime" autocomplete="off"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="问题编号 " :label-width="fromLabelWidth">
        <el-input v-model="form.questionId" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="FormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPost()">确认</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.title-name {
  margin: 10px;
}

.title-search {
  margin: 10px;
}
</style>